<template>
    <Modal
        :draggable="!$config.mask"
        :mask="$config.mask"
        :mask-closable="!$config.mask"
        :value="value"
        @on-ok="save"
        @on-visible-change="visibleChange"
        width="800"
    >
        <p slot="header">
            账户信息
        </p>
        <Form ref="userForm" :model="currentUser" label-postion="top" :rules="userRule">
            <Row :gutter="16">
                <Col span="6">
                    <div :style="{backgroundImage:'url(' + userAvatar + ')',backgroundSize:'100% 100%'}" class="avatar">

                    </div>
                </Col>
                <Col span="18">
                    <FormItem label="用户名" prop="userName">
                        <Input v-model="currentUser.userName" placeholder="" :maxlength="256" readonly
                               class="userName" :disabled="true"></Input>
                    </FormItem>
                    <FormItem label="姓名" prop="name">
                        <Input v-model="currentUser.name" placeholder="" :maxlength="64"></Input>
                    </FormItem>
                </Col>
            </Row>
            <FormItem class="h-label" label="性别" prop="genderLabel">
                <RadioGroup v-model="currentUser.genderLabel">
                    <Radio label="男"></Radio>&nbsp;&nbsp;&nbsp;
                    <Radio label="女"></Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="Email地址" prop="emailAddress">
                <Input v-model="currentUser.emailAddress" placeholder="" :maxlength="256"></Input>
            </FormItem>
            <FormItem label="电话号码" prop="phoneNumber">
                <Input v-model="currentUser.phoneNumber" placeholder="" :maxlength="24"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button @click="cancel" icon="md-close">取消</Button>
            <Button @click="save" type="primary" icon="md-checkmark">确定</Button>
        </div>
    </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import Ajax from '@/lib/ajax';

@Component({
    components: {},
})
export default class ProfileChange extends AbpBase {
    name: string = 'ProfileChange';

    @Prop({type: Boolean, default: false}) value: boolean;
    currentUser: { name: string, userName: string, gender: boolean, genderLabel: string, emailAddress: string, phoneNumber: string } = {
        name: '',
        userName: '',
        emailAddress: '',
        phoneNumber: '',
        gender: false,
        genderLabel: '',
    };
    userRule = {
        name: [
            {
                required: true,
                message: '姓名是必须的',
                trigger: 'blur',
            },
        ],
        genderLabel: [
            {
                required: true,
                message: '性别是必须的',
                trigger: 'change',
            },
        ],
        emailAddress: [
            {
                required: true,
                message: 'Email地址是必须的',
                trigger: 'blur',

            },
            {
                type: 'email',
                message: 'Email地址格式不正确',
                trigger: 'blur',
            },
            {
                validator: async (rule, value, callback) => {
                    const response = await Ajax.post('/api/services/app/User/ValidateEmailAddress', {
                        value: value,
                        id: this.$store.state.session.user.id,
                    });
                    if (response.data.result.status) {
                        callback();
                    } else {
                        callback(new Error(response.data.result.message));
                    }
                },
                trigger: 'blur',
            },
        ],
        phoneNumber: [
            {
                required: true,
                message: '电话号码是必须的',
                trigger: 'blur',

            },
        ],
    };

    get userAvatar() {
        if (this.$store.state.app.userAvatar === '') {
            return './images/defaultProfilePicture.png';
        } else {
            return 'data:image/png;base64,' + this.$store.state.app.userAvatar;
        }
    }

    async save() {
        (this.$refs.userForm as any).validate(async (valid: boolean) => {
            this.currentUser.genderLabel === '男' ? this.currentUser.gender = true : this.currentUser.gender = false;
            if (valid) {
                await this.$store.dispatch({
                    type: 'app/updateCurrentUserProfile',
                    data: this.currentUser,
                });
                this.$Message.success({
                    background:true,
                    content: '您的账户信息已修改成功',
                    duration: this.$config.duration,
                });
                this.$emit('input', false);
            }
        });
    }

    cancel() {
        this.$emit('input', false);
    }

    reset() {
        (this.$refs.userForm as any).resetFields();
    }

    visibleChange(value: boolean) {
        if (!value) {
            this.reset();
            this.$emit('input', value);
        } else {
            this.currentUser = this.$store.state.app.currentUser;
            this.currentUser.gender ? this.currentUser.genderLabel = '男' : this.currentUser.genderLabel = '女';
        }
    }
}
</script>

<style lang="less">
.userName input {
    font-weight: normal;
}

.avatar {
    margin-top: 0;
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>
